<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 后端管理系统</title>
    <link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/main.css">
    <!--[if lt IE 9]>
    <script src="./js/html5.js"></script>
    <script src="./js/respond.min.js"></script>
    <![endif]-->
</head>
<body id="container">
<nav>
    <ul>
        <li>
            <i class="fa fa-navicon fa-lg toggle-nav" style="font-size: 25px;"></i>
            <a href="" class="a-logo">水晶球教育后台管理系统</a>
        </li>
        <li class="nav-li-manage">
            <img class="manage_avatar" src="http://demo.mycodes.net/houtai/AdminLTE/dist/img/user2-160x160.jpg" alt="">
            <a href="#">管理员</a>
            <span class="fa  fa-caret-right arrow" style="float: right;line-height: 55px"></span>
            <ul>
                <li>个人资料</li>
                <li>修改密码</li>
                <li>设置</li>
                <li>登出</li>
            </ul>
        </li>
    </ul>
</nav>
<section>
    <div id="sidebar">
        <ul class="sidebar-menu">
            <li>
                <a href="index.html">
                    <i class="fa fa-home fa-fw"></i>
                    <span>主页</span>
                </a>
            </li>
            <li>
                <a href="tab.html">
                    <i class="fa fa-home fa-fw"></i>
                    <span>tab页</span>
                </a>
            </li>
            <li class="toggle-li">
                <a>
                    <i class="fa fa-stop-circle-o fa-fw"></i>
                    <span>系统管理</span>
                    <span class="fa  fa-caret-right arrow"></span>
                </a>
                <ul class="sub">
                    <li><a class="" href="manage_user.html">系统用户管理</a></li>
                    <li><a class="" href="users.html">用户管理</a></li>
                </ul>
            </li>
            <li>
                <a href="awesome.html">
                    <i class="fa fa-home fa-fw"></i>
                    <span>font-awesome</span>
                </a>
            </li>
            <li class="toggle-li">
                <a>
                    <i class="fa fa-stop-circle-o fa-fw"></i>
                    <span>常用 UI组件</span>
                    <span class="fa  fa-caret-right arrow"></span>
                </a>
                <ul class="sub">
                    <li><a class="" href="button.html">按钮</a></li>
                    <li><a class="" href="form.html">表单</a></li>
                    <li><a class="" href="table.html">表格</a></li>
                </ul>
            </li>
            <li class="toggle-li">
                <a>
                    <i class="fa fa-stop-circle-o fa-fw"></i>
                    <span>Jquery 插件</span>
                    <span class="fa  fa-caret-right arrow"></span>
                </a>
                <ul class="sub">
                    <li><a class="" href="datatables.html">datatables 表格</a></li>
                    <li><a class="" href="select2.html">select2 下拉框</a></li>
                    <li><a class="" href="layui.html">layui 弹出层</a></li>
                </ul>
            </li>

        </ul>
    </div>
    <section class="wrapper toggle-wrapper">
        <style>
            .container-fluid .row {
                text-align: center;
                margin: 10px 0;;
            }

            .container-fluid .row > div {
                border: 1px solid #ccc;
            }

            .container-fluid .row {
                margin: 50px 0;

            }

            th {
                text-align: center
            }
        </style>
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12">
                    <h1>
                        <a href="http://datatables.club/"> Datattables </a>
                    </h1>
                </div>
            </div>


            <div class="row">
                <h2>这是一个可以折叠的表格</h2>
                <table id="test2" class="display">
                    <thead>
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>身高</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>Row 1 Data 1</td>
                        <td>Row 1 Data 2</td>
                        <td>Row 1 Data 2</td>
                        <td>Row 1 Data 2</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="row">
                <h2>这是一个可以处理的表格</h2>
                <table id="test" class="display">
                    <thead>
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>身高</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>Row 1 Data 1</td>
                        <td>Row 1 Data 2</td>
                        <td>Row 1 Data 2</td>
                        <td>Row 1 Data 2</td>
                    </tr>
                    </tbody>
                </table>
            </div>


        </div>
    </section>
</section>
</body>
<div class="layer_notice" style="display: none;text-align: center;padding: 10px">
    <input type="text" class="form-control" value="默认数据">
</div>

<script src="./js/jquery.js"></script>
<script src="js/zhao.js"></script>
<script src="js/datatables/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="./js/datatables/css/jquery.dataTables.min.css">
<script src="js/layer/layer.js"></script>
<script src="js/mock.js"></script>
<script>
    var language = {
        "sProcessing": "处理中...",
        "sLengthMenu": "显示 _MENU_ 项结果",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix": "",
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "表中数据为空",
        "sLoadingRecords": "载入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上页",
            "sNext": "下页",
            "sLast": "末页"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    };
    function rand_obj() {
        var obj = [];
        var num = parseInt(Math.random() * 15 + 1, 10);
        Mock.Random.extend({
            constellation: function (date) {
                var constellations = ['男', '女']
                return this.pick(constellations)
            }
        });
        for (var i = 0; i < num; i++) {
            obj.push([
                Mock.mock('@cname'),
                Mock.mock({"number|0-1": 0}).number ? "男" : "女",
                Mock.mock({"number|1-80": 100}).number,
                Mock.mock({"number|145-200": 100}).number + "cm"])
        }
        return obj
    }
    var data = rand_obj();
    var data2 = rand_obj();

    $(document).ready(function () {
        /*可折叠*/
        var table = $('#test2').DataTable({
            data: data,
            language: language
        });
        table.rows().every(function () {
            this.child("<div style='width: 25%;margin:auto;text-align: center'>" +
                    "<h4>详细信息</h4>" +
                    "<li style='list-style-type: none;'> 我的名字:" + this.data()[0] + "</li>" +
                    "<li style='list-style-type: none;'> 性别:" + this.data()[1] + "</li>" +
                    "<li style='list-style-type: none;'> 年龄:" + this.data()[2] + "</li>" +
                    "<li style='list-style-type: none;'> 身高:" + this.data()[3] + "</li>" +
                    "</div>");
        });
        $("#test2").on('click', 'tr', function () {
            var child = table.row(this).child;
            if (child.isShown()) {
                child.hide();
            }
            else {
                child.show();
            }
        });

        /*可以修改*/
        $test = $("#test");
        $test.DataTable({
            language: language,
            data: data2
        });
        $test.on("click", "td", function () {
            $('.layer_notice>input').val($(this).text());
            var $taget = $(this)
            //捕获页
            layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                title: false, //不显示标题
                area: ['420px', '120px'], //宽高
                content: $('.layer_notice'),
                btn: ['修改', '取消'],
                btn1: function () {
                    $taget.text($('.layer_notice>input').val())
                }
            });
        })
    });

</script>
</html>